<template>
  <div class="form-buttons">
    <el-button size="mini" v-for="(item, index) in opt.options" :key="index" :type="getType(item)" @click="handleClick(item)">{{item.v}}
    </el-button>
  </div>
</template>

<script>
import extend from '../extend';
let Log = () => { };

// 多个按钮展示
export default {
  name: "FormButtons",
  mixins: [extend],
  data() {
    return {
      opt: {
        name: '',
        text: '',
        options: [],
        props: {
          type: 'text',
          disabled: false
        },
        hide: false,
        placeholder: ''
      }
    }
  },
  created() {
    this.initOptions();
    this.onClick = this.column.onClick || Log;
  },
  methods: {
    getType(item) {
      let val = this.data[this.opt.name];
      return item.value == val ? 'primary' : 'default';
    },
    setValue(val) {
      this.data[this.opt.name] = val;
      this.$forceUpdate();
    },
    handleClick(item) {
      this.setValue(item.value);
      this.onClick();
    }
  }
}
</script>

<style>
.form-buttons {
  padding-bottom: 6px;
}
</style>
